<template>
	<view class="my-content">
		<view class="tab-box">
			<text :class="currentType == 1 ? 'active tab-item' : 'tab-item'" @click="currentType=1;getMyCollect()">电桩</text>
			<view class="tab-line"></view>
			<text :class="currentType == 2 ? 'active tab-item' : 'tab-item'" @click="currentType=2;getMyCollect()">车位</text>
		</view>

		<template v-for="item in myCollectList">
			<Pile :item="item" />
		</template>
		
		<view  v-if="!myCollectList || myCollectList.length == 0" style="height: 100px;"></view>
		
		<Nomore v-if="!myCollectList || myCollectList.length == 0"></Nomore>


	</view>
</template>

<script>
import Pile from "../../components/common/Pile.vue"
export default {
	components: {
		Pile
	},
	data() {
		return {
			currentType: 1,
			myCollectList: []
		}
	},
	onShow() {
		this.getMyCollect()
	},
	methods: {
		changeInx(e) {
			this.currentType = e
		},
		async getMyCollect() {
			const res = await this.http("get", "/api/user/my_collect", {
				type: this.currentType // 1桩 2停车位
			})
			this.myCollectList = res.data;
		},
	}
}
</script>

<style lang="less" scoped>
.my-content {
	width: 100%;
	padding: 30upx;
	box-sizing: border-box;

	.tab-box {
		width: 100%;
		height: 80upx;
		border-radius: 16upx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 20upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);

		.tab-line {
			width: 2px;
			height: 100%;
			background-color: #D8D8D8;
		}

		.tab-item {
			font-size: 32upx;
			color: #D8D8D8;
			font-weight: bold;
			display: block;
			width: 40%;
			text-align: center;
		}

		.active {
			color: #FF8F1F;
		}
	}

	.res-box {
		width: 100%;
		border-radius: 16upx;
		overflow: hidden;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		margin-bottom: 20upx;
		position: relative;

		.jiao {
			position: absolute;
			top: 10upx;
			right: 10upx;
			width: 40upx;
			height: 40upx;
			border-radius: 8upx;
			background: #FA5151;
			color: #fff;
			font-size: 24upx;
			text-align: center;
			line-height: 40upx;
		}

		.res-top {
			width: 100%;
			display: flex;

			.res-top-l {
				width: 40upx;
				background-color: #00B578;
				font-size: 24upx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				padding: 10upx 0;
			}

			.yellow-l {
				background-color: #FFC300;
			}

			.orange-l {
				background-color: #FF8F1F;
			}

			.res-top-c {
				display: flex;
				align-items: center;
				width: 90%;
				padding: 10upx;
				box-sizing: border-box;

				.res-img {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 10upx;

					image {
						width: 100%;
						height: auto;
					}
				}

				.res-text {
					.res-flex {
						display: flex;

						text {
							min-width: 200upx;
							margin-right: 40upx;
						}
					}

					.res-title {
						font-size: 28upx;
						color: #000;
					}

					.green {
						color: #00B578;
					}

					.yellow {
						color: #FF8F1F;
					}

					text {
						display: block;
						font-size: 24upx;
						color: #9E9E9E;
					}
				}
			}
		}
	}
}
</style>